import React, { useState } from 'react'
import '../App.css'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
export default function Login() {
  const [account, setaccount] = useState('')
  const [password, setpassword] = useState('')
  let navigate = useNavigate()
  const [errorMessage, setErrorMessage] = useState('')
  const [phone, setphone] = useState('')
  const [yanZhengma, setYanZhengma] = useState('')
  const [show, setshow] = useState('zhang')
  const sendCode = () => {
    if (!phone) {
      setErrorMessage('手机号不能为空')
    }
    axios.post('http://127.0.0.1:3001/sendYzm', { phone: phone }).then(res => {
      if (res.status == 200) {
        if (res.data.code === 200) {
          setErrorMessage('')
          alert('验证码已发送')
        } else {
          alert('验证码发送失败')
          setErrorMessage(res.data.message)
        }
      } else {
        alert(`请求失败，状态码: ${res.status}`);
        setErrorMessage('请求失败，请稍后再试');
      }

    })
  }
  const login = () => {
    if (show === 'zhang') {
      // 账号密码登录
      if (!account || !password) {
        setErrorMessage('账号和密码不能为空');
        return;
      }
      axios.post('http://127.0.0.1:3001/login', { account, password })
        .then(res => {
          if (res.status === 200 && res.data.code === 200) {
            alert('登录成功');
            navigate('/');
          } else {
            setErrorMessage(res.data.msg || '登录失败');
          }
        })
        .catch(err => {
          setErrorMessage('网络错误，请稍后再试');
          console.error(err);
        });
    } else {
      // 验证码登录
      if (!phone || !yanZhengma) {
        setErrorMessage('手机号和验证码不能为空');
        return;
      }
      axios.post('http://127.0.0.1:3001/loginByCode', { phone, code: yanZhengma })
        .then(res => {
          if (res.status === 200 && res.data.code === 200) {
            alert('登录成功');
            navigate('/');
          } else {
            setErrorMessage(res.data.msg || '登录失败');
          }
        })
        .catch(err => {
          setErrorMessage('网络错误，请稍后再试');
          console.error(err);
        });
    }
  }
  return (
    <div>
      <div className='login'>
        <div style={{ width: '100%', display: 'flex', justifyContent: 'space-evenly', marginTop: '-20px' }}>
          <p onClick={() => setshow('zhang')} style={{ borderBottom: show == 'zhang' ? '2px solid #40cbaa' : '', fontWeight: show == 'zhang' ? 'bold' : '' }}>账号登录</p>
          <p onClick={() => setshow('yan')} style={{ borderBottom: show == 'yan' ? '2px solid #40cbaa' : '', fontWeight: show == 'yan' ? 'bold' : '' }}>验证码登录</p>
        </div>
        {show == 'zhang' ? <div>
          <input type="text" placeholder='请输入账号/手机号' value={account} onChange={(e) => {
            setaccount(e.target.value)
          }} className='input' />
          <input type="password" placeholder='请输入密码' value={password} onChange={(e) => {
            setpassword(e.target.value)
          }} className='input' />

        </div> : <div>
          <input type="text" placeholder='请输入手机号' value={phone} onChange={(e) => {
            setphone(e.target.value)
          }} className='input' />
          <input type="password" placeholder='请输入验证码' value={yanZhengma} onChange={(e) => {
            setYanZhengma(e.target.value)
          }} className='input' />
          <button onClick={sendCode} style={{ position: 'absolute', top: '335px', left: '260px', border: 'none', color: 'blue', backgroundColor: '#fff' }} >发送验证码</button>
        </div>}
        {errorMessage && <p>{errorMessage}</p>}
        <button className='button' onClick={login}>登录</button>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <p onClick={() => navigate('/find')} style={{ marginLeft: '30px', marginTop: '5px' }}>忘记密码</p>
          <p style={{
            marginTop: '5px',
            fontSize: '14px'
          }}>还没有账号?<span style={{ color: '#14cfb4', cursor: 'pointer' }} onClick={() => navigate('/zhuce')}>立即注册</span></p>
        </div>

      </div>

    </div>
  )
}
